<!--
 * @Description: 
 * @Author: chenju
 * @Date: 2022-03-22 17:08:41
 * @LastEditors: qingyang
 * @LastEditTime: 2023-06-30 18:11:33
-->
<template>
  <CDialog
    title="新增因子"
    custom-class="g-dialog-scroll"
    append-to-body
    destroy-on-close
    :width="720"
    :close-on-click-modal="false"
    v-model:visible="dialogVisible"
    @confirm="handleConfirm"
    @cancel="dialogVisible = false"
    :loading="loading"
    hasScroll
  >
    <div class="edit-op-container" v-if="dialogVisible">
      <el-form
        ref="formRef"
        :model="taskForm"
        :rules="obj.rules"
        label-position="top"
        :inline="true"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="因子名称：" prop="factorName">
              <el-input v-model="taskForm.factorName" maxlength="50" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="英文名称：" prop="enName">
              <el-input v-model="taskForm.enName" maxlength="50" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="因子类型：" prop="type">
              <el-select v-model="taskForm.type" clearable style="width: 100%" placeholder="请选择">
                <el-option
                  v-for="item in factorTypeOptionx"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="GWP版本：" prop="gwpVersion">
              <el-select
                v-model="taskForm.gwpVersion"
                style="width: 100%"
                clearable
                placeholder="请选择"
                @change="handleChange"
              >
                <el-option
                  v-for="item in gwpOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="活动数据单位：" prop="dataUnit">
              <!-- <el-select
                v-model="taskForm.dataUnit"
                style="width: 100%"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in obj.dataUnitOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
              <el-input v-model="taskForm.dataUnit" disabled placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="因子单位：" prop="unit">
              <el-select
                v-model="taskForm.unit"
                style="width: 100%"
                @change="handleChangeUnit"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in unitList"
                  :key="item.dataValue"
                  :label="item.dataValue"
                  :value="item.dataValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="line"></div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="CO₂排放系数：" prop="coEmission">
              <el-input
                v-model="taskForm.coEmission"
                v-positive-only:6
                type="number"
                placeholder="请输入"
                @wheel.stop.prevent
              >
                <template #suffix
                  >{{ taskForm.dataUnit ? unit + 'CO₂/' : '' }}{{ taskForm.dataUnit }}</template
                >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="CH₄排放系数：" prop="chEmission">
              <el-input
                v-model="taskForm.chEmission"
                v-positive-only:6
                type="number"
                placeholder="请输入"
                @wheel.stop.prevent
              >
                <template #suffix
                  >{{ taskForm.dataUnit ? unit + 'CH₄/' : '' }}{{ taskForm.dataUnit }}</template
                >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="N₂O排放系数：" prop="noEmission">
              <el-input
                v-model="taskForm.noEmission"
                v-positive-only:6
                type="number"
                placeholder="请输入"
                @wheel.stop.prevent
              >
                <template #suffix
                  >{{ taskForm.dataUnit ? unit + 'N₂O/' : '' }}{{ taskForm.dataUnit }}</template
                >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="HFCs/PFCs排放系数：" prop="hpEmission">
              <el-input
                v-model="taskForm.hpEmission"
                v-positive-only:6
                type="number"
                placeholder="请输入"
                @wheel.stop.prevent
              >
                <template #suffix
                  >{{ taskForm.dataUnit ? unit + '(HFCs/PFCs)/' : ''
                  }}{{ taskForm.dataUnit }}</template
                >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SF₆排放系数：" prop="sfEmission">
              <el-input
                v-model="taskForm.sfEmission"
                v-positive-only:6
                type="number"
                placeholder="请输入"
                @wheel.stop.prevent
              >
                <template #suffix
                  >{{ taskForm.dataUnit ? unit + 'SF₆/' : '' }}{{ taskForm.dataUnit }}</template
                >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="NF₃排放系数：" prop="nfEmission">
              <el-input
                v-model="taskForm.nfEmission"
                v-positive-only:6
                type="number"
                placeholder="请输入"
                @wheel.stop.prevent
              >
                <template #suffix
                  >{{ taskForm.dataUnit ? unit + 'NF₃/' : '' }}{{ taskForm.dataUnit }}</template
                >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="line"></div>
        <el-row style="width: 100%">
          <el-col :span="12">
            <el-form-item label="因子来源类型：" prop="sourceType">
              <el-select
                v-model="taskForm.sourceType"
                style="width: 100%"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in FactorSourceTypeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"> </el-col>
          <el-col :span="12">
            <el-form-item label="因子来源：" prop="source">
              <el-input v-model="taskForm.source" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本号：" prop="version">
              <el-input v-model="taskForm.version" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </CDialog>
</template>
<script lang="ts">
export default {
  name: 'AddOrEditTaskDialog'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref, watch, reactive } from 'vue';
import { CDialog } from '@/components/CDialog';
import { useMessage } from '@/hooks/useMessage';
import * as obj from './rules';
import { factorTypeOptionx, FactorSourceTypeOption } from '@/constants/enum';

import { createFactor } from '@/apis/system/config/factorList';
import { getBase } from '@/apis/common/common';
import { IUnitResult } from '@/apis/common/model/commonModel';
interface SelectFillTypeDialogProps {
  visible: boolean;
}
const props = withDefaults(defineProps<SelectFillTypeDialogProps>(), {});
const emit = defineEmits(['update:visible', 'refresh']);
const dialogVisible = computed<boolean>({
  get: () => {
    console.log(props.visible);

    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
watch(
  () => dialogVisible.value,
  visible => {
    if (visible) {
      init();
    } else {
      formRef.value?.resetFields();
    }
  }
);

const formRef = ref();
const loading = ref(false);
const { createMessage } = useMessage();
const taskForm = reactive({
  factorName: '',
  enName: '',
  type: '',
  dataUnit: '',
  unit: '',
  coEmission: '',
  chEmission: '',
  noEmission: '',
  hpEmission: '',
  sfEmission: '',
  nfEmission: '',
  sourceType: '',
  source: '',
  version: ''
});
const unit = ref();
const unitList = ref<IUnitResult[]>([]);
const loadUnitList = async () => {
  let data = await getBase('inventory:FACTOR_UNIT');
  unitList.value = data ?? [];
};
loadUnitList();
function handleChangeUnit(value: string) {
  if (value) {
    let arr = value.split('/');
    unit.value = arr[0];
    taskForm.dataUnit = arr[1];
  } else {
    taskForm.dataUnit = '';
  }
}
function handleConfirm() {
  formRef.value?.validate((valid: boolean, val: any) => {
    if (valid) {
      loading.value = true;
      createFactor(taskForm)
        .then((res: any) => {
          createMessage.success('新增因子成功');
          dialogVisible.value = false;
          init();
          emit('refresh');
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      const keys = Object.keys(val);
      formRef.value?.scrollToField(keys[0]);
    }
  });
}
function init() {
  loading.value = false;
  formRef.value?.resetFields();
}
</script>
<style lang="scss" scoped>
.line {
  height: 1px;
  background: #ebeef5;
  width: 100%;
  margin-bottom: 15px;
}
</style>
